<template>
  <div class="file-list-container">
    <div class="header">
      <div :style="{ opacity: showTitle ? 1 : 0 }" class="form-title-wrapper">
        <div class="form-title-text">文件上传列表</div>
      </div>
      <el-button type="primary" :disabled="disabled" @click="addFileUpload" :icon="Plus">添加文件上传</el-button>
    </div>

    <div class="file-upload-list">
      <div v-for="(item, index) in fileUploadList" :key="index" class="file-upload-item">
        <div class="item-header">
          <div class="title-input-wrapper">
            <label class="title-label">标题：</label>
            <el-input
              v-model="item.groupName"
              :disabled="disabled"
              placeholder="请输入文件标题"
              class="title-input"
              clearable />
          </div>
          <div class="actions">
            <el-button
              link
              type="danger"
              :icon="Delete"
              :disabled="disabled"
              @click="removeFileUpload(index)"
              v-if="fileUploadList.length > 1">
              删除
            </el-button>
          </div>
        </div>
        <!-- @change="files => handleFileChange(index, files)"  -->
        <div class="upload-wrapper">
          <FileUpload :key="index" v-model="item.files" :disabled="disabled" />
        </div>
      </div>
    </div>

    <!-- 数据预览 -->
    <div v-if="showPreview" class="data-preview">
      <h4>当前数据：</h4>
      <pre>{{ JSON.stringify(fileUploadList, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'
import FileUpload from '@/components/FileUpload/index.vue'
import { fi } from 'element-plus/es/locale'

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  // 文件上传列表
  fileUploadList: {
    required: true,
    type: Array,
    default: () => [],
  },
  showTitle: {
    type: Boolean,
    default: true,
  },
})

interface FileUploadItem {
  groupName: string
  files: string
}

const showPreview = ref(false)

// 添加文件上传组件
const addFileUpload = () => {
  props.fileUploadList.push({
    groupName: '',
    files: '',
  })

  // ElMessage.success('已添加新的文件上传组件')

  // 滚动到新添加的组件
  nextTick(() => {
    const container = document.querySelector('.file-list-container')
    if (container) {
      container.scrollTop = container.scrollHeight
    }
  })
}

// 删除文件上传组件
const removeFileUpload = async (index: number) => {
  try {
    await ElMessageBox.confirm('确定要删除这个文件上传组件吗？', '确定删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })

    props.fileUploadList.splice(index, 1)
    ElMessage.success('删除成功')
  } catch {
    // 用户取消删除
  }
}
// 文件变化处理
// const handleFileChange = (index: number, files: any[]) => {
//   if (Object.prototype.toString.call(files) !== '[object Array]') {
//     return
//   }
//   // console.log('转换', files.value)
//   // props.fileUploadList[index].files = files.value
//   // console.log(`第${index + 1}个组件文件变化:`, files)
// }

// 删除单个文件
// const removeFile = (uploadIndex: number, fileIndex: number) => {
//   props.fileUploadList[uploadIndex].fileList.splice(fileIndex, 1)
//   ElMessage.success('文件删除成功')
// }

// 暴露方法给父组件
defineExpose({
  getData: () => props.fileUploadList,
  addUpload: addFileUpload,
})
</script>

<style scoped lang="scss">
.form-title-wrapper {
  display: flex;
  align-items: center;
  &::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background-color: #409eff;
    margin-right: 8px;
    vertical-align: middle;
  }
  .form-title-text {
    font-size: 18px;
    font-weight: 650;
  }
}
.file-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;

  h3 {
    margin: 0;
    color: #303133;
    font-size: 18px;
    font-weight: 600;
  }
}

.file-upload-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.file-upload-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 20px;
  background: #fafafa;
  transition: all 0.3s ease;

  &:hover {
    border-color: #409eff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
  }
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
}

.title-input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
}

.title-label {
  font-weight: 500;
  color: #606266;
  white-space: nowrap;
  font-size: 14px;
}

.title-input {
  max-width: 300px;
}

.actions {
  flex-shrink: 0;
}

.upload-wrapper {
  margin-bottom: 16px;
}

.file-preview {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e4e7ed;
}

.preview-title {
  font-size: 13px;
  color: #909399;
  margin-bottom: 8px;
}

.file-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.file-tag {
  max-width: 200px;

  :deep(.el-tag__content) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.data-preview {
  margin-top: 24px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;

  h4 {
    margin: 0 0 12px 0;
    color: #303133;
    font-size: 14px;
  }

  pre {
    background: white;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    font-size: 12px;
    line-height: 1.5;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .file-list-container {
    padding: 12px;
  }

  .header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .item-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .title-input-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .title-input {
    max-width: none;
  }
}

/* 动画效果 */
.file-upload-item {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
